<template>
  <task-container @menuItemClick="onMenuItemClick" @selectItemClick="onSelectItem" @setOperation="onSetOperation">
    <div class="c-box">
      <!-- <div class="personal-details">
        <div class="icon">
          <img src="~@/assets/ico/u18916.png" height="90" alt="" />
        </div>
        <div class="info">
          <div style="margin-bottom: 10px;">
            姓名：{{ Object.keys(infoObj).length > 0 && infoObj.name ? infoObj.name : null }}
          </div>
          <div class="info-flex">
            <div>手机：{{ Object.keys(infoObj).length > 0 && infoObj.name ? infoObj.phone : null }}</div>
            <div>运营商：{{ Object.keys(infoObj).length > 0 && infoObj.name ? infoObj.name : null }}</div>
            <div>归属地：{{ Object.keys(infoObj).length > 0 && infoObj.name ? infoObj.name : null }}</div>
          </div>
        </div>
      </div> -->
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="详细信息">
          <custom-table
            ref="table"
            rowKey="id"
            :showColSettings="false"
            :hideColSettings="['action']"
            :showAlert="false"
            :showSelection="false"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @change="onTableChange"
            size="middle"
          >
          </custom-table>
        </a-tab-pane>
        <a-button
          slot="tabBarExtraContent"
          @click="onUpdate"
          :loading="btnLoading"
          :disabled="idDisabled"
          v-if="isOperation"
        >
          更新数据
        </a-button>
      </a-tabs>
    </div>
  </task-container>
</template>
<script>
import taskContainer from '../modules/taskContainer'
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/wxSmuggle/eventModel.js'
export default {
  components: {
    taskContainer,
    CustomTable
  },
  data() {
    return {
      infoObj: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          width: 60
        },
        {
          title: '其他手机号',
          dataIndex: 'relatedMsisdn',
          width: 100
        },
        {
          title: '归属地',
          dataIndex: 'homeName',
          width: 100
        },
        {
          title: 'imei',
          dataIndex: 'imei',
          width: 100
        },
        {
          title: 'imsi',
          dataIndex: 'imsi',
          width: 100
        },
        {
          title: '运营商',
          dataIndex: 'ispName',
          width: 60
        }
      ],
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      idDisabled: true,
      pageData: {},
      isOperation: true,
      btnLoading: false
    }
  },
  mounted() {
    // this.refreshTable()
  },
  methods: {
    // 点击左边任务
    onMenuItemClick(id) {
      // console.log("id")
      // console.log(id)
      this.pageFilter.incidentTaskId = id
    },
    // 点击目标人员
    onSelectItem(item) {
      // console.log("item.taskId")
      // console.log(item.taskId)
      this.pageFilter.msisdn = item.phoneNumber
      this.refreshTable()
      // this.getInfo()
    },
    onSetOperation(isOperation) {
      this.isOperation = isOperation
    },
    getInfo() {
      api
        .multiplePhonesList()
        .then(res => {
          if (res.success) {
            this.infoObj = res.result
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    onUpdate() {
      this.btnLoading = true
      let params = { msisdn: this.pageFilter.msisdn, incidentTaskId: this.pageFilter.incidentTaskId }
      api
        .multiplePhonesDoFetch(params)
        .then(res => {
          if (res.success) {
            let n = res.result
            //n秒后自动刷新列表数据
            if (n >= 0) {
              let _this = this
              setTimeout(() => {
                _this.$message.success('更新成功！')
                _this.btnLoading = false
                _this.refreshTable()
              }, n * 1000)
            }
          } else {
            this.btnLoading = false
            this.$message.warn('更新失败！')
          }
        })
        .catch(e => {
          this.btnLoading = false
          this.$message.warn('更新失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      api
        .multiplePhonesList(this.pageFilter)
        .then(res => {
          if (res.success) {
            if (res.result != null) {
              this.pageData = res.result
            } else {
              this.pageData = []
            }
            this.loading = false
            this.idDisabled = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warning(res.message)
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.menuBox {
  height: auto;
}
.personal-details {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  .icon {
    flex: 1;
    .anticon {
      font-size: 80px;
    }
  }
  .info {
    flex: 4;
    .info-flex {
      display: flex;
      justify-content: space-between;
      > * {
        flex: 1;
      }
    }
  }
}
</style>
